<template>
    <div class="dialog">
        <el-dialog
            :title="stationInfoData.title + '详情'"
            :visible.sync="dialogTableVisible"
            :modal="false"
            width="80vw"
            @open="open()"
        >
            <div class="menu-transform">
                <div
                    class="menu-table"
                    :class="{ active: ischartShow }"
                    @click="changeMenu('chart')"
                >
                    统计数据
                </div>
                <div
                    class="menu-chart"
                    :class="{ active: istableShow }"
                    @click="changeMenu('table')"
                >
                    表格数据
                </div>
            </div>
            <div class="time-choose">
                <el-date-picker
                    v-model="timeValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </div>
            <div class="demo-input-suffix">
                <!-- <el-input class="custom-input" placeholder="请输入年份/STD/RES/ARS/样本是" prefix-icon="el-icon-search"
        >
      </el-input>
      <el-button type="primary" icon="el-icon-search">查询</el-button>
      <el-button type="primary" icon="el-icon-download">下载</el-button>
      <el-button type="primary" icon="el-icon-printer">打印</el-button> -->

                <!-- 添加两个并列的虚线框 -->
                <div class="dashed-boxes">
                    <div class="dashed-box" v-show="ischartShow">
                        <span class="box-title">统计数据</span>
                        <div id="newEcharts" style="width: 100%; height: 25rem"></div>
                    </div>
                    <div class="dashed-box" v-show="istableShow">
                        <span class="box-title">表格数据</span>
                        <el-table v-show="ishdData" :data="tableDataInfo" height="500px" border style="width: 100%">
                            <el-table-column
                                prop="observtime"
                                label="时间"
                                sortable
                                width="180"
                            ></el-table-column>
                            <el-table-column
                                prop="waterLevel"
                                label="水位"
                                sortable
                                width="180"
                            ></el-table-column>
                            <el-table-column
                                prop="flowData"
                                label="流量"
                                sortable
                            ></el-table-column>
                            <el-table-column prop="aes" label="水势" sortable></el-table-column>
                        </el-table>
                        <el-table  v-show="isskData" :data="tableDataInfo1" height="500px" border style="width: 100%">
                            <el-table-column
                                prop="observtime"
                                label="时间"
                                sortable
                                width="180"
                            ></el-table-column>
                            <el-table-column
                                prop="waterLevel"
                                label="水位"
                                sortable
                                width="180"
                            ></el-table-column>
                            <el-table-column
                                prop="flowInData"
                                label="入库流量"
                                sortable
                            ></el-table-column>
                            <el-table-column
                                prop="flowOutData"
                                label="出库流量"
                                sortable
                            ></el-table-column>
                            <el-table-column prop="waterStorage" label="蓄水量" sortable></el-table-column>
                        </el-table>
                        <!-- <div id="echarts2" style="height:200px;width:100%;"></div> -->
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import echarts from 'echarts';
import { getWaterProcess } from '@/api/zhjcleft';
export default {
    data() {
        return {
            maxRiverFlow: 16,
            maxReservoirFlow: 80,
            warningRiverLevel: 15,
            warningReservoirLevel: 1200,
            maxRiverLevel: 5,
            maxReservoirLevel: 20,
            maxWaterFlow: 0,
            maxWaterLevel: 0,
            waterWarningLevel: 0,
            dialogTableVisible: true,
            ischartShow: false,
            istableShow: true,
            ishdData:false,
            isskData:false,
            stationInfoData: {},
            tableDataInfo: [
                {
                    observtime: '2016-05-03',
                    waterLevel: '1.276',
                    flowData: '2.916',
                    aes: '0.989',
                },
            ],
            tableDataInfo1: [
                {
                    observtime: '2016-05-03',
                    waterLevel: '1.276',
                    flowInData: '2.916',
                    flowOutData: '2.916',
                    waterStorage: '0.989',
                },
            ],
            waterProcessChart: {},
            //图表展示数据
            chartTimeData: [],
            chartWarningData: [],
            chartFlowData: [],
            chartFlowData1: [],
            chartLevelData: [],
            number: 0,
            startTime: '2020-09-04 10:00:00',
            endTime: '2024-09-29 10:00:00',
            timeValue: [new Date(2020, 10, 10, 10, 10), new Date(2024, 10, 11, 10, 10)],
            formData: [
                {
                    year: '2016-05-03',
                    std: '1.276',
                    res: '2.916',
                    aes: '0.989',
                    sampleSize: '1',
                },
            ],
        };
    },
    watch: {
        timeValue(newVal) {
            console.log(newVal, '时间变化');
            this.startTime = this.formatDate(newVal[0]);
            this.endTime = this.formatDate(newVal[1]);
            // this.waterProcessChart.startTime = this.startTime;
            // this.waterProcessChart.endTime = this.endTime;
            this.getChartData();
        },
    },
    methods: {
        showtimeline() {
            this.dialogTableVisible = true;
        },
        //获取站点数据
        getStationInfo(val) {
            this.stationInfoData = val;
            console.log(this.stationInfoData, '获取站点数据');
            console.log(this.timeValue, '获取时间数据');
            this.waterProcessChart.type = this.stationInfoData.type;
            if (this.stationInfoData.type == '水库站') {
               
                this.ishdData = false;
                this.isskData = true;
                this.waterProcessChart.stnm = this.stationInfoData.reservoirName;
                this.stationInfoData.title = this.stationInfoData.reservoirName;
                this.maxWaterFlow = this.maxReservoirFlow;
                this.maxWaterLevel = this.maxReservoirLevel;
            } else {
                this.ishdData = true;
                this.isskData = false;
                this.waterProcessChart.stnm = this.stationInfoData.stnm;
                this.stationInfoData.title = this.stationInfoData.stnm;
                this.maxWaterFlow = this.maxRiverFlow;
                this.maxWaterLevel = this.maxRiverLevel;
            }
            console.log(this.chartTimeData, '获取图表时间数据');
            this.getChartData();
        },
        // 创建河道数据图表
        initEcharts() {
            var echarts = require('echarts');
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('newEcharts'));
            // 绘制图表
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                legend: {
                    data: ['水位', '流量', '警戒水位'],
                    selected: {
                        警戒水位: true, // 确保警戒水位图例是选中状态
                    },
                    textStyle: {
                        color: '#333', // 图例文字颜色
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.chartTimeData,
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '水位',
                        min: 0,
                        max: this.maxWaterLevel,
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} m',
                        },
                    },
                    {
                        type: 'value',
                        name: '流量',
                        min: 0,
                        max: this.maxWaterFlow,
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} m³/h',
                        },
                    },
                ],
                series: [
                    {
                        name: '水位',
                        type: 'line',
                        data: this.chartLevelData,
                        yAxisIndex: 0,
                        itemStyle: {
                            color: 'black', // 折线图线条颜色
                        },
                    },
                    {
                        name: '流量',
                        type: 'line',
                        data: this.chartFlowData,
                        yAxisIndex: 1,
                        itemStyle: {
                            color: 'blue', // 折线图线条颜色
                        },
                    },
                    {
                        name: '警戒水位',
                        type: 'line',
                        data: this.chartWarningData, // 使用数组表示点
                        markLine: {
                            symbol: 'none',
                            data: [
                                { type: 'line', xAxis: 'min', yAxis: 11 },
                                { type: 'line', xAxis: 'max', yAxis: 11 },
                            ],
                            lineStyle: {
                                color: 'red',
                                type: 'solid',
                            },
                        },
                        yAxisIndex: 0,
                        itemStyle: {
                            normal: {
                                color: 'red', // 折线图线条颜色，实际上这条线不显示，但影响图例颜色
                                lineStyle: {
                                    // width: 0, // 隐藏实际的线条
                                },
                            },
                        },
                    },
                ],
            };

            myChart.setOption(option);
        },
        //创建水库数据图表
       initEcharts1() {
            var echarts = require('echarts');
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('newEcharts'));
            // 绘制图表
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                legend: {
                    data: ['水位', '入库流量', '出库流量','汛限水位'],
                    selected: {
                        汛限水位: true, // 确保汛限水位图例是选中状态
                    },
                    textStyle: {
                        color: '#333', // 图例文字颜色
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.chartTimeData,
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '水位',
                        min: 0,
                        max: this.maxWaterLevel,
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} m',
                        },
                    },
                    {
                        type: 'value',
                        name: '流量',
                        min: 0,
                        max: this.maxWaterFlow,
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} m³/h',
                        },
                    },
                   
                ],
                series: [
                    {
                        name: '水位',
                        type: 'line',
                        data: this.chartLevelData,
                        yAxisIndex: 0,
                        itemStyle: {
                            color: 'black', // 折线图线条颜色
                        },
                    },
                    {
                        name: '入库流量',
                        type: 'line',
                        data: this.chartFlowData,
                        yAxisIndex: 1,
                        itemStyle: {
                            color: 'blue', // 折线图线条颜色
                        },
                    },
                    {
                        name: '出库流量',
                        type: 'line',
                        data: this.chartFlowData1,
                        yAxisIndex: 1,
                        itemStyle: {
                            color: 'blue', // 折线图线条颜色
                        },
                    },
                    {
                        name: '汛限水位',
                        type: 'line',
                        data: this.chartWarningData, // 使用数组表示点
                        markLine: {
                            symbol: 'none',
                            data: [
                                { type: 'line', xAxis: 'min', yAxis: 11 },
                                { type: 'line', xAxis: 'max', yAxis: 11 },
                            ],
                            lineStyle: {
                                color: 'red',
                                type: 'solid',
                            },
                        },
                        yAxisIndex: 0,
                        itemStyle: {
                            normal: {
                                color: 'red', // 折线图线条颜色，实际上这条线不显示，但影响图例颜色
                                lineStyle: {
                                    // width: 0, // 隐藏实际的线条
                                },
                            },
                        },
                    },
                ],
            };

            myChart.setOption(option);
        },
        open() {
            this.$nextTick(() => {
                //  执行echarts方法
                if (this.chartInstance) {
                    this.chartInstance.resize();
                }
            });
        },
        changeMenu(val) {
            if (val == 'chart') {
                this.ischartShow = true;
                this.istableShow = false;
            } else {
                this.ischartShow = false;
                this.istableShow = true;
            }
            if(this.ishdData){
                console.log('有数据')
            this.$nextTick(() => {
                if (!this.chartInstance) {
                    this.initEcharts();
                } else {
                    this.chartInstance.resize();
                }
            });}else{
                console.log('有水库数据')
            this.$nextTick(() => {
                if (!this.chartInstance) {
                    this.initEcharts1();
                } else {
                    this.chartInstance.resize();
                }
            });
            }
        },
        getChartData() {
            this.waterProcessChart.startTime = this.startTime;
            this.waterProcessChart.endTime = this.endTime;
            getWaterProcess(this.waterProcessChart).then(res => {
                if (this.stationInfoData.type == '河道站') {
                    this.chartTimeData = res.data.map(item => item.latestobservetime);
                    this.chartWarningData = res.data
                        .map(item => item.warningwaterstatus)
                        .map((item, index) => [index, item]);

                    // this.transformedData = this.chartWarningData.map((item, index) => [index, item]);
                    this.chartFlowData = res.data.map(item => item.smallscaleflow);
                    this.chartLevelData = res.data.map(item => item.smallscalewaterstatus);
                    this.waterFlow = this.maxRiverFlow;
                    this.waterlevel = this.maxRiverLevel;
                    this.waterWarningLevel = this.warningRiverLevel;
                    console.log(this.chartTimeData, 'res河道');
                    const tableDataInfo = res.data.map(item => {
                        return {
                            observtime: item.latestobservetime.split(' ')[0], // 假设你只需要日期部分
                            waterLevel: item.smallscalewaterstatus.toString(), // 转换为字符串
                            flowData: item.smallscaleflow.toString(),
                            aes: item.warningwaterstatus.toString(),
                        };
                    });
                    this.tableDataInfo = tableDataInfo;
                    
                } else {
                    this.chartTimeData = res.data.map(item => item.observtime);
                    this.chartWarningData = res.data
                        .map(item => item.limitedWaterlv)
                        .map((item, index) => [index, item]);
                    // this.transformedData = this.chartWarningData.map((item, index) => [index, item]);
                    this.chartFlowData = res.data.map(item => item.storageflow);
                    this.chartFlowData1 = res.data.map(item => item.totaloutbound);
                    this.chartLevelData = res.data.map(item => item.waterleve);
                    console.log(this.chartTimeData, 'res');
                    this.waterFlow = this.maxReservoirFlow;
                    this.waterlevel = this.maxReservoirLevel;
                    this.waterWarningLevel = this.warningReservoirLevel;
                    console.log(this.chartTimeData, 'res水库');
                    const tableDataInfo = res.data.map(item => {
                        return {
                            observtime: item.observtime.split(' ')[0], // 假设你只需要日期部分
                            waterLevel: item.waterleve.toString(), // 转换为字符串
                            flowInData: item.storageflow.toString(),
                            flowOutData: item.totaloutbound.toString(),
                            waterStorage: item.waterstorage.toString(),
                        };
                    });
                    this.tableDataInfo1 = tableDataInfo;
                }

                if (this.number == 0) this.number = 1;
                else {
                    this.$nextTick(() => {
                        if (!this.chartInstance) {
                            this.initEcharts();
                        } else {
                            this.chartInstance.resize();
                        }
                    });
                }
            });
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
    },
    mounted() {
        this.initEcharts();
    },
};
</script>

<style scoped>
/* .nianbiao{
position:absolute;
z-index: 1000;
} */
.dialog {
    background-color: blackransparent !important;
}
.menu-transform {
    margin-top: -1rem;
    width: 78vw;
    height: 4vh;
    /* border: 1px solid black; */
    display: flex;
}
.time-choose {
    width: 78vw;
    height: 4vh;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
}
::v-deep .el-input__inner {
    border: 0;
}
.menu-table {
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    text-align: center;
    line-height: 200%;
    font-size: 1rem;
}
.menu-table.active {
    color: rgb(8, 46, 82);
    border-bottom: 1px solid rgb(8, 46, 82);
}
.menu-chart {
    width: 50%;
    height: 100%;
    /* border: 1px solid black; */
    text-align: center;
    line-height: 200%;
    font-size: 1rem;
}
.menu-chart.active {
    color: rgb(8, 46, 82);
    border-bottom: 1px solid rgb(8, 46, 82);
}
.text {
    font-size: 16px;
    display: flex;
    border: 1px solid #ddd;
    margin-top: 15px;
}

.text .left,
.text .right {
    width: 50%;
    padding: 10px;
}

.text .left .item {
    margin: 0;
}

.text .right img {
    width: 100%;
    height: auto;
}

.card-footer button {
    font-size: 16px;
    /* 调整按钮文字大小 */
    margin: 0 10px;
}

.custom-input {
    width: 40%;
    /* 设置宽度为父容器的40% */
    margin-right: 10px;
    /* 添加右侧的间距 */
}

/* 虚线框容器样式，包含两个框并列 */
.dashed-boxes {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* 每个虚线框样式 */
.dashed-box {
    width: 100%;
    /* 每个框占宽度的48%，使它们并列 */
    border: 1px dashed #ccc;
    /* 设置虚线边框 */
    padding: 10px;
    position: relative;
}

/* 虚线框标题样式 */
.box-title {
    position: absolute;
    top: -12px;
    left: 10px;
    background-color: white;
    padding: 0 5px;
    font-size: 14px;
    color: #333;
}
::v-deep el-dialog {
    background-color: transparent;
}
/deep/.el-dialog__header {
    height: 27px;
    background-color: rgba(0, 35, 71, 0.7);
    text-align: center;
}

/deep/.el-dialog__title {
    color: white !important;
    font-size: 24px;
}

/deep/.el-dialog__close {
    font-size: 24px !important;
    /* 增大关闭按钮字体大小 */
}
::v-deep .el-table__body-wrapper,
.el-table__footer-wrapper,
.el-table__header-wrapper {
    background-color: white;
}
</style>
